<template>
    <div>
        <!--module1 tree page-->
        <div class="container">
            <h3 style="font-weight: 300;">权限字典</h3>
            <hr>
            <el-tree :data="tree" :props="defaultProps" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <div>{{ data.name }}</div>
                <div style="margin-left: 2rem;">{{data.id}}</div>
                <div class="btn" style="margin-left: 2rem;" @click="copy(data.id)">复制</div>
            </span>
            </el-tree>
            <hr>
            <br>
        </div>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    export default {
        components: {
        },
        data(){
            return{
                tree: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                showForm: false,
                treeData: {},
            }
        },
        methods: {
            // 获取菜单列表
            getMenu(){
                this.config.get('/admin/menu/getMenuList', {}).then(res=>{
                    if(res.data.code==='0'){
                        let arr = res.data.menuList;
                        this.tree = pub.arrayToTreeList(arr, 'id', 'pid');
                    }else{
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            handleNodeClick(data) {
                // console.log(data);
            },
            // 复制
            copy (str) {
                let oInput = document.createElement('input')
                oInput.value = str
                document.body.appendChild(oInput)
                oInput.select()
                document.execCommand("Copy")
                oInput.style.display = 'none'
                document.body.removeChild(oInput)
                this.$message.success('复制成功')
            },
        },
        mounted(){
            this.getMenu();
        }
    }
</script>

<style lang="less" scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-right: 8px;
        &:hover{
            color: red;
        }
    }
</style>
